<template>
	<view>
		<view class="card_wrapper">
			<view class="top_bg"></view>
			<view class="card">
				<view class="card_title">签到领积分</view>
				<view class="card_items flexRow">
					<view class="card_item" :class="{card_sing_ing: item.signIn=='1',card_sing_in: item.signIn=='0',card_sing_ed: item.signIn=='-1'}" v-for="(item,key) in list" :key="key">
						<view class="card_item_title flexRow" :class="{actived: item.signIn=='1'}">第{{item.index}}天{{item.signIn=='1'?'已签':''}}</view>
						<view class="card_item_bottom" :class="{activedBottom: item.signIn=='1'}">+{{item.integral}}</view>
					</view>
					<view style="visibility: hidden;" class="card_item"></view>
					<!-- <view class="card_item card_sing_in"></view>
					<view class="card_item card_sing_ed"></view>
					<view class="card_item card_sing_ing"></view>
					<view class="card_item card_sing_in"></view>
					<view class="card_item card_sing_in"></view>
					<view class="card_item card_sing_ed"></view>
					<view class="card_item card_sing_ing"></view> -->
				</view>
				<disable-click>
					<view class="card_btn" :class="{card_btn_disabel: currentSignIn==1}" @tap="signIn">签 到</view>
				</disable-click>
			</view>
		</view>
		<!-- <view class="task_list_wrapper">
			<view class="task_list">
				<view class="task_label flexRow">
					<image src="/static/img/task_lable.png"></image>
					<view >新手任务</view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg1"></view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg2"></view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg3"></view>
				</view>
				<view class="task_label flexRow">
					<image src="/static/img/task_lable.png"></image>
					<view >每日任务</view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg1"></view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg2"></view>
				</view>
				<view class="task_item flexRow">
					<image class="task_item_icon" src="/static/img/douyin.png" mode=""></image>
					<view class="task_item_main">
						<view class="task_name">累计10次投票任务</view>
						<view class="award">+1000积分</view>
					</view>
					<view class="task_item_btn task_item_btn_bg3"></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import request from "../../apiRequest/request.js"
	export default {
		data() {
			return {
				list: [],
				currentSignIn: ''
			}
		},
		methods: {
			initList(){
				request.signInList().then(res=>{
					console.log(res)
					this.list = res.data.list
					this.currentSignIn = res.data.currentSignIn
				})
			},
			signIn(){
				if(this.currentSignIn === 0){
					request.signInAdd().then(res=>{
						console.log(res)
						this.initList()
					})
				}
			}
		},
		onShow() {
			this.initList()
		}
	}
</script>

<style>
.card_wrapper{
	width: 100%;
	position: relative;
}	
.top_bg{
	width: 100%;
	height:250rpx;
	background:rgba(4,137,255,1);
	position: absolute;
	z-index: -1;
	top: 0;
}
.card_wrapper{
	padding: 30rpx 0 40rpx 0;
	box-sizing: border-box;
}
.card{
	margin: 0 20rpx;
	background:rgba(255,255,255,1);
	box-shadow:0 2rpx 14rpx 0 rgba(172,172,172,0.6);
	border-radius:10rpx;
	padding: 0 20rpx;
	border-bottom: 1rpx solid transparent;
}
.card_title{
	font-size:38rpx;
	line-height: 38rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(49,49,49,1);
	padding: 29rpx 0;
}
.card_items{
	justify-content: space-between;
}
.card_item{
	width: 160rpx;
	height: 160rpx;
	background-size: cover;
	margin-bottom: 10rpx;
	position: relative;
}
/* .card_item:nth-child(4n){
	margin-right: 0;
} */
.card_sing_in{
	background-image: url(../../static/img/sign_in.png);
}
.card_sing_ed{
	background-image: url(../../static/img/sign_ed.png);
}
.card_sing_ing{
	background-image: url(../../static/img/sign_ing.png);
}
.card_btn{
	width:220rpx;
	height:80rpx;
	line-height: 80rpx;
	background:linear-gradient(0deg,rgba(4,137,255,1),rgba(145,202,255,1));
	border-radius:10rpx;
	text-align: center;
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin: 0 auto;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.task_list_wrapper{
	padding: 0 20rpx;
	padding-bottom: 40rpx;
}
.task_list{
	background:rgba(255,255,255,1);
	box-shadow:0 2rpx 14rpx 0 rgba(172,172,172,0.6);
	border-radius:10rpx;
	padding: 0 20rpx 30rpx 20rpx;
}
.task_item{
	align-items: center;
	margin-bottom: 30rpx;
}
.task_item_main{
	flex: 1;
	padding-left: 20rpx;
}
.task_item_icon{
	width: 100rpx;
	height: 100rpx;
}
.task_item_btn{
	width: 180rpx;
	height: 60rpx;
	background-size: cover;
}
.task_item_btn_bg1{
	background-image: url(../../static/img/achieve1.png);
}
.task_item_btn_bg2{
	background-image: url(../../static/img/achieve2.png);
}
.task_item_btn_bg3{
	background-image: url(../../static/img/achieve3.png);
}
.task_name{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.award{
	color:rgba(255,202,26,1);
	font-size:22rpx;
	opacity:0.99;
}
.card_item_title{
	font-size:23rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(203,201,205,1);
	padding: 7rpx 0;
	padding-left: 16rpx;
}
.card_item_bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding-bottom: 11rpx;
	font-size:21rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(205,205,207,1);
}
.card_btn_disabel{
	background: rgba(235,237,235,1);
}
.actived{
	color: rgba(255,179,5,1);
}
.activedBottom{
	color:rgba(255,255,255,1);
}
</style>
